<template>
	<div class="food-list">
        <nav-header></nav-header>

        <div class="zh-table">
			<div class="zh-table-open clear">
                <div class="zh-open-left fl">
                    <div class="open-width">
                        <el-input v-model="listParam.keyword" @keyup.enter.native="searchFunc" placeholder="名称、价格"></el-input>
                    </div>
                    <el-button type="primary" @click="searchFunc">搜索</el-button>
                    <el-button type="primary" @click="resetList">重置</el-button>
                </div>
                <div class="zh-open-right fr">
                    <el-button type="primary" @click="newFood">新建菜式</el-button>               
                    <el-button type="danger" @click="dleteAllConfirm">批量删除</el-button>
                </div>
            </div>

            <div class="zh-table-contents" v-loading="loading.status" :element-loading-text="loading.txt">
                <el-table
                    :data="listData"
                    fixed
                    border
                    max-height="600"
                    @selection-change="tableSelectionChange"
                    style="width: 100%">
                    <el-table-column
                        type="selection"
                        width="50"
                        align="center"
                        fixed>
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        label="菜式名称"
                        align="center"
                        width="386"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        prop="price"
                        label="菜式价格"
                        align="center"
                        width="180"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        prop=""
                        label="图片"
                        align="center"
                        width="100"
                        show-overflow-tooltip>
                        <template slot-scope="scope">
                            <span v-if="scope.row.path" class="check-row" @click="checkImg(scope.row)">查看</span>
                            <span v-else>-</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                        prop="user_name"
                        label="创建者"
                        align="center"
                        width="260"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        prop="create_time"
                        label="创建时间"
                        align="center"
                        show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                        label="操作"
                        align="center"
                        :width="180">
                        <template slot-scope="scope">
                            <el-button @click="editRow(scope.row.id)" type="text">编辑</el-button>
                            <el-button @click="deleteRowConfirm(scope.row.id)" type="text" class="delete-button">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>

				<div class="table-pagination" v-show="totalNumber > 10">
					<el-pagination
						@size-change="changeCurrentSize"
						@current-change="changeCurrentPage"
						:current-page="listParam.pageIndex"
						:page-sizes="[10, 20, 30, 40, 50, 100]"
						:page-size="listParam.pageSize"
						layout="total, sizes, prev, pager, next, jumper"
						:total="totalNumber">
					</el-pagination>
				</div>
			</div>
		</div>

        <image-viewer
            v-if="imagePreview.showViewer"
            :initial-index="imageIndex"
            :on-close="closeViewer"
            :url-list="imagePreview.previewSrcList">
        </image-viewer>
    </div>
</template>

<script>
export default {
    data() {
        return {
            imagePreview: {
                showViewer: false,
                previewSrcList: []
            },
            imgVisible: false, // 图片预览
            imgViewUrl: null, // 图片地址
            rowLen: 0,
            totalNumber: 0,
            selected: [], // 选中的数据
            listData: [],
            loading: {
                status: false,
                txt: '获取数据...'
            },
            listParam: {
                keyword: '',
                pageIndex: 1,
                pageSize: 10,
            }
        }
    },
    created() {
        this.getList();
    },
    computed: {
        imageIndex() {
            return this.imagePreview.previewSrcList.indexOf(this.imgViewUrl);
        }
    },
    methods: {
        /**
         * 获取菜式管理列表
         */
        getList() {
            this.loading.status = true;

            let success = (res=>{
                this.loading.status = false;
                this.listData = res.data.data;
                this.totalNumber = res.data.data_sum;
            })
            let params = {
                page_index: this.listParam.pageIndex,
                page_size: this.listParam.pageSize,
                keyword: this.listParam.keyword,
            }

            this.$ajax.get('api/carte/menulists', {params, func: {success: success}})
        },
        /**
         * 搜索列表
         */
        searchFunc() {
            this.listParam.pageIndex = 1;
            this.getList();
        },
        /**
         * 重置菜式管理列表
         */
        resetList() {
            this.listParam = {
                keyword: '',
                pageIndex: 1,
                pageSize: 10,
            }

            this.getList();
        },
        /**
         * 查看图片
         * @param {Object} obj 记录信息
         */
        checkImg(obj) {
            this.imgViewUrl = this.BASE_URL + obj.path;
            this.imagePreview.showViewer = true;
            this.imagePreview.previewSrcList = [this.BASE_URL + obj.path];
        },
        closeViewer() {
            this.imagePreview.showViewer = false;
        },
        /**
         * 新建菜式
         */
        newFood() {
            this.$router.push("/life/canteen/new-food");
        },
        /**
         * 编辑页
         * @param {Number} id 菜单 id
         */
        editRow(id) {
            this.$router.push("/life/canteen/edit-food/" + id);
        },
        /**
         * 是否删除该数据
         * @param {Number} val 要删除数据的 id
         */
        deleteRowConfirm(val) {
            let yes = (res => {
                this.rowLen = 1;

                this.deleteData(val);
            })
            let cancel = (res => {})

            this.e_confirm({yes: yes, cancel: cancel, txt: '删除后不可恢复，确认删除吗？'});
        },
        /**
         * 是否确定批量删除
         */
        dleteAllConfirm() {
            if(this.selected.length === 0) {
                this.$message.warning("请选择要删除的项");
                return false;
            }

            let yes = (res => {
                let ids = [];
                this.rowLen = this.selected.length;

                this.selected.forEach(item => {
                    ids.push(item.id);
                })

                this.deleteData(ids);
            })
            let cancel = (res => {})

            this.e_confirm({yes: yes, cancel: cancel, txt: '确定要删除选中的项吗？'});
        },
        /**
         * 删除数据
         * @param {Number/Array} 要删除数据的 id
         * @param {Number/Array} 要删除数据的 car id
         */
        deleteData(id) {
            this.loading.status = true;

            let success = (res => {
                this.$message.success(res.msg);
                
                if (this.listData.length === this.rowLen) {
                    if (this.listParam.pageIndex > 1) {
                        this.listParam.pageIndex-- ;
                    } else {
                        this.listParam.pageIndex = 1;
                    }
                }

                this.getList();
            });
            let fail = (res =>{
                this.$message.error(res.msg);

                this.getList();
            }) 
            let params = {
                id
            }
            
            this.$ajax.delete('api/carte/menusingle', {params, func: {success: success, fail: fail}})
        },
        /**
         * 列表数据多选
         * @param {Array} val 选中数据的数组
         */
        tableSelectionChange(val) {
            this.selected = val;
        },
        /**
         * 设置每页中显示的数据数量
         * @param {Number} val 每页数据条数
         */
        changeCurrentSize(val) {
            this.listParam.pageIndex = 1;
            this.listParam.pageSize = val;

            this.getList();
        },
        /**
         * 切换到第几页数据
         * @param {Number} val 页数
         */
        changeCurrentPage(val) {
            this.listParam.pageIndex = val;

            this.getList();
        },
    },
}
</script>

<style lang="scss">
.food-list {
    .check-row {
        color: #348EFC;
        cursor: pointer;
    }
}
</style>